<template>
  <div class="app-container">
    <div class="tab-bar" v-if="!isSucess">
      <div
        class="tab-item"
        :class="current === it.id ? 'tab-item-ac' : ''"
        v-for="(it, idx) in tabList"
        :key="idx"
        @click="handleTabClick(it.id)"
      >
        {{ it.name }}
      </div>
    </div>
    <div class="form-main" ref="formMain" v-if="!isSucess">
      <el-form
        :model="form"
        ref="formRef"
        :rules="rules"
        style="margin-top: 30px"
      >
        <div ref="basicInfo">
          <el-card class="box-card">
            <div slot="header" class="clearfix">基础信息</div>
            <!-- <el-form-item label="产品图片" prop="pic" label-width="120px">
              <single-upload
                uploadType="2"
                @uploadSucces="uploadSucces"
                v-model="form.pic"
              >
                <div class="uploadPic" v-if="!form.pic">
                  <i
                    style="font-size: 40px; color: #ccc; font-weight: bold"
                    class="el-icon-plus"
                  ></i>
                </div>
              </single-upload>
            </el-form-item> -->
            <el-form-item label="产品名称" prop="name" label-width="120px">
              <el-input
                style="width: 500px"
                v-model.trim="form.name"
                clearable
                placeholder="请输入产品名称"
              />
            </el-form-item>
            <el-form-item
              label="产品所属银行"
              prop="bankId"
              label-width="120px"
            >
              <el-select
                style="width: 500px"
                @change="handleBankChange"
                v-model.trim="form.bankId"
                placeholder="请选择产品所属银行"
                clearable
                filterable
              >
                <el-option
                  v-for="(item, idx) in bankList"
                  :key="item.id + ' ' + idx"
                  :label="item.name"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <!--            <div class="inputSty">-->
            <!--              <el-form-item-->
            <!--                label="额度区间"-->
            <!--                label-width="120px"-->
            <!--                prop="minQuota"-->
            <!--              >-->
            <!--                <el-input-->
            <!--                  style="width: 234px"-->
            <!--                  placeholder="请输入额度区间"-->
            <!--                  clearable-->
            <!--                  type="number"-->
            <!--                  min="0"-->
            <!--                  v-model="form.minQuota"-->
            <!--                >-->
            <!--                  <template slot="suffix"-->
            <!--                    ><span style="color: #000">万元</span></template-->
            <!--                  >-->
            <!--                </el-input>-->
            <!--              </el-form-item>-->
            <!--              <el-form-item style="margin: 0 10px"> — </el-form-item>-->
            <!--              <el-form-item prop="maxQuota">-->
            <!--                <el-input-->
            <!--                  clearable-->
            <!--                  style="width: 234px"-->
            <!--                  placeholder="请输入额度区间"-->
            <!--                  type="number"-->
            <!--                  v-model="form.maxQuota"-->
            <!--                >-->
            <!--                  <template slot="suffix"-->
            <!--                    ><span style="color: #000">万元</span></template-->
            <!--                  >-->
            <!--                </el-input>-->
            <!--              </el-form-item>-->
            <!--            </div>-->
            <el-form-item
              prop="maxQuota"
              label="贷款最高额度"
              label-width="120px"
            >
              <el-input
                clearable
                oninput="if(value.length>3)value=value.slice(0,8)"
                style="width: 500px"
                placeholder="请输入贷款最高额度"
                type="number"
                maxlength="11"
                v-model.trim="form.maxQuota"
              >
                <template slot="suffix"
                  ><span style="color: #000">万元</span></template
                >
              </el-input>
            </el-form-item>
            <div class="inputSty">
              <el-form-item
                label="年化利率"
                label-width="120px"
                prop="minAnnualRate"
              >
                <el-input
                  clearable
                  style="width: 234px"
                  placeholder="请输入年化利率"
                  type="number"
                  :max="100"
                  v-model.trim="form.minAnnualRate"
                >
                  <template slot="suffix"
                    ><span style="color: #000">%</span></template
                  >
                </el-input>
              </el-form-item>
              <el-form-item style="margin: 0 10px"> — </el-form-item>
              <el-form-item>
                <el-input
                  clearable
                  style="width: 234px"
                  placeholder="请输入年化利率"
                  type="number"
                  min="0"
                  max="100"
                  v-model.trim="form.maxAnnualRate"
                >
                  <template slot="suffix"
                    ><span style="color: #000">%</span></template
                  >
                </el-input>
              </el-form-item>
            </div>
            <div class="inputSty">
              <el-form-item
                label="年龄"
                label-width="120px"
                prop="corporateAge"
              >
                <el-input
                  @change="inputAge($event, 'min')"
                  clearable
                  min="18"
                  max="100"
                  style="width: 234px"
                  placeholder="请输入年龄"
                  type="number"
                  v-model.trim="form.corporateAge"
                >
                  <template slot="suffix"
                    ><span style="color: #000;">岁</span></template
                  >
                </el-input>
              </el-form-item>
              <el-form-item style="margin: 0 10px"> — </el-form-item>
              <el-form-item prop="corporateMaxAge">
                <el-input
                  @change="inputAge($event, 'max')"
                  clearable
                  style="width: 234px"
                  placeholder="请输入年龄"
                  type="number"
                  min="18"
                  max="100"
                  v-model.trim="form.corporateMaxAge"
                >
                  <template slot="suffix"
                    ><span style="color: #000">岁</span></template
                  ></el-input
                >
              </el-form-item>
            </div>
            <el-form-item label="借款期限" label-width="120px" prop="loanTerm">
              <el-select
                clearable
                multiple
                style="width: 500px"
                v-model.trim="form.loanTerm"
                placeholder="请选择还款期限"
              >
                <el-option
                  v-for="(item, idx) in loanTermList"
                  :key="item.value + idx"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item
              label="还款方式"
              prop="repaymentType"
              label-width="120px"
            >
              <el-select
                style="width: 500px"
                v-model="form.repaymentType"
                multiple
                placeholder="请选择还款方式"
              >
                <el-option
                  v-for="(item, idx) in repaymentTypeList"
                  :key="item.value + idx"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item
              label="产品优势"
              label-width="120px"
              prop="advantageData"
            >
              <div
                style="
                  display: flex;
                  justify-content: space-between;
                  width: 500px;
                "
              >
                <el-input
                  v-for="(item, idx) in form.advantageData"
                  :key="idx"
                  style="width: 156px"
                  maxlength="5"
                  v-model.trim="item.value"
                  :placeholder="`请输入产品优势${idx + 1}`"
                />
              </div>
            </el-form-item>
            <el-form-item label="贷款分类" label-width="120px" prop="loanType">
              <el-radio-group v-model="form.loanType">
                <el-radio
                  v-for="(item, idx) in cidList"
                  :key="idx"
                  :label="item.value"
                  >{{ item.label }}</el-radio
                >
              </el-radio-group>
            </el-form-item>

            <el-form-item label="产品类型" label-width="120px" prop="matchType">
              <el-checkbox-group v-model="form.matchType">
                <el-checkbox
                  v-for="(item, idx) in matchTypeList"
                  :key="idx"
                  :label="item.value"
                  >{{ item.label }}</el-checkbox
                >
              </el-checkbox-group>
            </el-form-item>
            <el-form-item label="来源" label-width="120px" prop="channelCode">
              <el-radio-group v-model="form.channelCode">
                <el-radio
                  v-for="(item, idx) in product_channelList"
                  :key="idx"
                  :label="item.value"
                  >{{ item.label }}</el-radio
                >
              </el-radio-group>
            </el-form-item>
            <el-form-item
              label="三方产品Id"
              label-width="120px"
              prop="productSn"
              v-if="form.channelCode != 'platform'"
            >
              <el-input
                disabled
                style="width: 500px"
                v-model="form.productSn"
              ></el-input>
              <el-button type="primary" size="mini" @click="getProductData()"
                >获取数据</el-button
              >
            </el-form-item>
            <el-form-item
              label="测额模型"
              prop="modelService"
              label-width="120px"
            >
              <el-select
                style="width: 500px"
                @change="handleBankChange"
                v-model.trim="form.modelService"
                placeholder="请选择测额模型"
                clearable
                filterable
              >
                <el-option
                  v-for="(item, idx) in YhList"
                  :key="item.id + ' ' + idx"
                  :label="item.dictLabel"
                  :value="item.dictValue"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="排序" label-width="120px">
              <el-input-number
                :min="0"
                placeholder="请输入排序"
                v-model="form.sort"
              />
            </el-form-item>
          </el-card>
        </div>

        <div ref="requiredDocuments">
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              办理要求
              <el-tooltip
                effect="dark"
                :offset="5"
                content="请输入办理该贷款产品的广泛条件"
                placement="bottom-start"
              >
                <span class="wenhao">?</span>
              </el-tooltip>
            </div>
            <el-form-item label-width="120px" label="个人要求">
              <el-input
                style="width: 500px;"
                :autosize="{ minRows: 4, maxRows: 4 }"
                type="textarea"
                clearable
                v-model.trim="form.legalApplyRequire"
                placeholder="请输入个人要求"
              ></el-input>
            </el-form-item>
            <el-form-item label-width="120px" label="企业要求">
              <el-input
                style="width: 500px"
                :autosize="{ minRows: 4, maxRows: 4 }"
                type="textarea"
                clearable
                v-model.trim="form.companyTaxInfo"
                placeholder="请输入企业要求"
              ></el-input>
            </el-form-item>

            <el-form-item label="征信要求" label-width="120px">
              <el-input
                style="width: 500px"
                clearable
                placeholder="请输入征信要求"
                :autosize="{ minRows: 4, maxRows: 4 }"
                type="textarea"
                v-model.trim="form.creditRequire"
              >
              </el-input>
            </el-form-item>
            <!--            <el-form-item label="其他条件" label-width="120px">-->
            <!--              <el-input-->
            <!--                style="width: 500px"-->
            <!--                clearable-->
            <!--                :autosize="{ minRows: 4, maxRows: 4 }"-->
            <!--                type="textarea"-->
            <!--                v-model="form.otherRequire"-->
            <!--                placeholder="请输入其他条件"-->
            <!--              >-->
            <!--              </el-input>-->
            <!--            </el-form-item>-->
            <div v-for="(it, idx) in form.customRequireList" :key="idx">
              <el-form-item label-width="120px" :label="`${it.title}`">
                <div style="display: flex; align-items: center">
                  <el-input
                    style="width: 500px; margin-right: 20px"
                    clearable
                    :autosize="{ minRows: 4, maxRows: 4 }"
                    type="textarea"
                    v-model.trim="it.content"
                    placeholder="请输入其他条件"
                  >
                  </el-input>
                  <el-button
                    size="mini"
                    type="danger"
                    plain
                    icon="el-icon-delete"
                    @click="delMoreType(idx)"
                    >删除</el-button
                  >
                </div>
              </el-form-item>
            </div>
            <el-form-item label="更多类型" label-width="120px">
              <el-button
                size="mini"
                type="primary"
                icon="el-icon-plus"
                @click="addMoreType"
                >添加</el-button
              >
            </el-form-item>

            
          </el-card>
        </div>

        <!-- <div ref="personalRequirements">
          <el-card class="box-card">
            <div slot="header" class="clearfix">个人要求</div>
            <el-form-item label="法人年龄" label-width="120px">
              <el-input
                style="width: 800px"
                placeholder="请输入法人年龄"
                v-model="form.corporateAge"
              />
            </el-form-item>
            <el-form-item label="法人变更时长" label-width="120px">
              <el-input
                style="width: 800px"
                placeholder="请输入法人变更时长"
                v-model="form.corporateChangeTime"
              />
            </el-form-item>
            <el-form-item label="法人持股比例" label-width="120px">
              <el-input
                style="width: 800px"
                placeholder="请输入法人持股比例"
                v-model="form.corporateSharesRatio"
              />
            </el-form-item>
            <el-form-item label="个人要求" label-width="120px">
              <el-input
                style="width: 800px"
                type="textarea"
                :rows="4"
                placeholder="请输入补充内容"
                v-model="form.corporateRequire"
              >
              </el-input>
            </el-form-item>
          </el-card>
        </div>
        <div ref="businessRequirements">
          <el-card class="box-card">
            <div slot="header" class="clearfix">企业要求</div>
            <el-form-item label="企业成立时长" label-width="120px">
              <el-input
                style="width: 800px"
                placeholder="请输入企业成立时长"
                v-model="form.companyCreateTime"
              />
            </el-form-item>
            <el-form-item label="企业纳税评级" label-width="120px">
              <el-input
                style="width: 800px"
                placeholder="请输入企业纳税评级"
                v-model="form.companyTaxRating"
              />
            </el-form-item>
            <el-form-item label="纳税状态" label-width="120px">
              <el-input
                v-model="form.companyTaxStatus"
                style="width: 800px"
                placeholder="请输入纳税状态"
              ></el-input>
            </el-form-item>
            <el-form-item label="开票要求" label-width="120px">
              <el-input
                style="width: 800px"
                v-model="form.companyReceiptRequire"
                placeholder="请输入开票要求"
              ></el-input>
            </el-form-item>
            <el-form-item label="申请要求" label-width="120px">
              <el-input
                style="width: 800px"
                type="textarea"
                :rows="4"
                placeholder="请输入补充内容"
                v-model="form.companyApplyRequire"
              >
              </el-input>
            </el-form-item>
          </el-card>
        </div>
        <div ref="creditRequirements">
          <el-card class="box-card">
            <div slot="header" class="clearfix">征信要求</div>
            <el-form-item label="征信要求" label-width="120px">
              <el-input
                style="width: 800px"
                type="textarea"
                :rows="4"
                placeholder="请输入征信要求"
                v-model="form.creditRequire"
              >
              </el-input>
            </el-form-item>
          </el-card>
        </div> -->
        <div ref="admissionAreas">
          <el-card class="box-card">
            <div slot="header" class="clearfix">准入地区</div>
            <el-form-item label="地区类型" label-width="120px">
              <el-radio-group v-model="form.accessAreaType">
                <el-radio
                  v-for="(item, idx) in accessAreaTypeList"
                  :key="idx"
                  :label="item.value"
                  >{{ item.label }}</el-radio
                >
              </el-radio-group>
            </el-form-item>
            <el-form-item
              v-if="form.accessAreaType === 2"
              label="准入地区"
              label-width="120px"
              prop="accessAreaList"
            >
              <el-cascader
                style="width: 720px"
                v-model="form.accessAreaList"
                :options="cityList"
                filterable
                :props="{ multiple: true, value: 'id' }"
              ></el-cascader>
            </el-form-item>
          </el-card>
        </div>
        <div ref="prohibitedIndustries">
          <el-card class="box-card">
            <div slot="header" class="clearfix">禁入行业</div>

            <!--<el-form-item label="准入行业" label-width="120px">-->
            <!--  &lt;!&ndash;              <el-cascader&ndash;&gt;-->
            <!--  &lt;!&ndash;                filterable&ndash;&gt;-->
            <!--  &lt;!&ndash;                @change="industryChange"&ndash;&gt;-->
            <!--  &lt;!&ndash;                style="width: 800px"&ndash;&gt;-->
            <!--  &lt;!&ndash;                :show-all-levels="false"&ndash;&gt;-->
            <!--  &lt;!&ndash;                v-model="form.accessIndustry"&ndash;&gt;-->
            <!--  &lt;!&ndash;                :options="industryList"&ndash;&gt;-->
            <!--  &lt;!&ndash;                :props="props"&ndash;&gt;-->
            <!--  &lt;!&ndash;                clearable&ndash;&gt;-->
            <!--  &lt;!&ndash;                size="small"&ndash;&gt;-->
            <!--  &lt;!&ndash;              />&ndash;&gt;-->

            <!--  <el-input-->
            <!--    style="width: 800px"-->
            <!--    type="textarea"-->
            <!--    placeholder="请输入准入行业"-->
            <!--    :rows="4"-->
            <!--    v-model.trim="form.accessIndustry"-->
            <!--  >-->
            <!--  </el-input>-->
            <!--</el-form-item>-->
            <el-form-item label="禁入行业" label-width="120px">
              <el-cascader
                style="width: 720px"
                filterable
                v-model="form.forbidIndustryList"
                :props="{ multiple: true, value: 'id' }"
                :options="industryOptions"
                :show-all-levels="false"></el-cascader>
              <!--<el-input-->
              <!--  style="width: 800px" :collapse-tags="true"-->
              <!--  type="textarea"-->
              <!--  placeholder="请输入禁入行业"-->
              <!--  :rows="4"-->
              <!--  v-model.trim="form.prohibitIndustry"-->
              <!--&gt;-->
              <!--</el-input>-->
            </el-form-item>
          </el-card>
        </div>
        <div ref="applyStep">
          <el-card class="box-card">
            <div slot="header" class="clearfix">申请流程</div>
            <el-form-item label="申请流程" label-width="120px">
              <Tinymce v-model="form.applyDesc" :height="600" :width="800" />
            </el-form-item>
          </el-card>
        </div>
        <!-- <div ref="requiredDocuments">
          <el-card class="box-card">
            <div slot="header" class="clearfix">资料要求</div>
            <el-form-item label="资料要求" label-width="120px">
              <el-input
                style="width: 800px"
                type="textarea"
                :rows="4"
                placeholder="请输入资料要求"
                v-model="form.requiredMaterials"
              >
              </el-input>
            </el-form-item>
          </el-card>
        </div> -->
        <!-- <el-form-item label-width="120px"> </el-form-item> -->
      </el-form>
    </div>
    <div
      v-if="!isSucess"
      style="
        background-color: #fff;
        width: 100%;
        height: 60px;
        padding-bottom: 20px;
      "
    >
      <div
        style="
          margin: 20px;
          position: absolute;
          bottom: -10px;
          left: 50%;
          transform: translate(-50%, 0);
        "
      >
        <el-button v-debounce type="primary" @click="onSubmit('formRef')">{{
          this.$route.query.id ? "确认" : "提交产品"
        }}</el-button>
      </div>
    </div>

    <div v-if="isSucess">
      <el-card style="height: calc(100vh - 70px)">
        <sucessVue @addProduct="addProduct"></sucessVue>
      </el-card>
    </div>

    <el-dialog
      title="新增申请条件"
      :visible.sync="addTypeFlag"
      width="700px"
      :before-close="handleCloseMoreType"
    >
      <el-form :model="addTypeForm" :rules="rules" ref="addTypeForm" inline>
        <el-form-item label="要求标题" prop="title">
          <el-input
            style="width: 500px"
            v-model="addTypeForm.title"
            autocomplete="off"
            maxlength="6"
            placeholder="请输入要求标题"
          ></el-input>
        </el-form-item>
        <el-form-item label="要求内容" prop="content">
          <el-input
            type="textarea"
            style="width: 500px"
            :rows="4"
            v-model="addTypeForm.content"
            autocomplete="off"
            placeholder="请输入要求内容"
          ></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="handleCloseMoreType()">取 消</el-button>
        <el-button type="primary" @click="onSubmitAddType('addTypeForm')"
          >确 定</el-button
        >
      </span>
    </el-dialog>
    <selectData @selectData="selectData" ref="selectDataRef"></selectData>
  </div>
</template>

<script>
import {industryTreeApi} from "../../api/product";

const form = {
  pic: "", //产品图片
  name: "", // 产品名称
  bankId: "", // 银行ID
  bankName: "", // 银行名称
  minQuota: "0", // 最小额度
  maxQuota: null, // 最大额度
  minAnnualRate: null, // 最小年化利率
  maxAnnualRate: null, // 最大年化利率
  corporateAge: null, // 最小年龄
  corporateMaxAge: null, // 最大年龄
  loanTerm: [], // 借款期限
  repaymentType: [], // 还款方式
  advantageData: [{ value: "" }, { value: "" }, { value: "" }], // 产品优势
  loanType: "1",
  channelCode: "platform",
  productSn: "",
  intoElement: "",
  sort: 0,
  matchType: ["1"], // 产品类型
  // corporateAge: "", //法人年龄
  // corporateChangeTime: "", //法人变更时长
  // corporateSharesRatio: "", //法人持股比例
  // corporateRequire: "", //法人要求
  // companyCreateTime: "", //企业成立时长
  // companyTaxRating: "", // 企业纳税评级
  // companyTaxStatus: "", //  企业纳税状态
  // companyReceiptRequire: "", //企业开票要求
  // companyApplyRequire: "", //企业申请要求
  creditRequire: "", //征信要求
  accessAreaType: 1, //准入地类型
  accessAreaList: [], // 地区列表
  forbidIndustryList: [], //禁入行业
  // prohibitIndustry: "", //禁入行业
  accessIndustry: "", //准入行业
  legalApplyRequire: "", //法人申请要求
  companyTaxInfo: "", //  企业纳税信息
  companyBizStatus: "", //企业经营状态
  companyBankFlow: "", //企业经营流水
  otherRequire: "", //其他要求
  customRequireList: [], //
  applyDesc: "" ,//申请流程
   modelService:[]

  // requiredMaterials: "",
};
import SingleUpload from "@/components/Upload/uploadOne";
import { getBankList } from "@/api/system";
import { addProduct, editProduct, getProductDetail } from "@/api/product";
import sucessVue from "./components/sucess.vue";
import { rules, tabList } from "./options.js";
import { getAreaTree, getIndustryList } from "@/api/system";
import Tinymce from "@/components/Tinymce";
import selectData from "./components/selectData.vue";
export default {
  components: {
    SingleUpload,
    sucessVue,
    Tinymce,
    selectData
  },

  data() {
    return {
      props: {
        label: "name",
        value: "code",
        multiple: true,
        emitPath: false
      },
      rules,
      form: Object.assign({}, form),
      industryOptions: [],
      current: 0,
      tabList,
      bankList: [],
      YhList: [],
      loanTermList: [],
      repaymentTypeList: [],
      cidList: [],
      accessAreaTypeList: [
        { label: "全国", value: 1 },
        { label: "自定义", value: 2 }
      ],
      isSucess: false,
      matchTypeList: [],
      cityList: [],
      product_channelList: [],
      addTypeFlag: false,
      addTypeForm: {
        title: "",
        content: ""
      },
      industryList: []
    };
  },
  async mounted() {
    this.matchTypeList = await this.$getDictData("match_type");
    this.repaymentTypeList = await this.$getDictData("repayment_type");
    this.loanTermList = await this.$getDictData("loan_term_list");
    this.cidList = await this.$getDictData("product_cid");
    this.product_channelList = await this.$getDictData("product_channel");
    this.getBankList();
  },
  async created() {
    this.YhList = await this.$getDictData("model_service");
    this.resetForm();
    this.getDetail();
    this.getCityList();
    this.getIndustryTree()
    // this.getIndustryList();
  },
  methods: {
    getIndustryTree() {
      industryTreeApi().then(res => {
        this.recursionData(res.data)
        this.industryOptions = res.data
      })
    },
    recursionData(list) {
      list && list.forEach(item => {
        item.label = item.code + ' ' + item.label
        item.children && this.recursionData(item.children)
      })
      return list
    },
    selectData(v) {
      console.log(v);
      // productSn: "",
      //   intoElement: "",
      this.form.productSn = v.id;
      this.form.intoElement = v.pageInfo;
    },
    getProductData() {
      this.$refs.selectDataRef.handleClick();
    },
    industryChange(value) {
      const allCodes = this.collectLeafCodes(this.industryList);
      console.log(allCodes, value);
      if (allCodes.length === value.length) {
        // this.form.accessIndustry = ["00000"];
      }
      console.log(this.form.accessIndustry);
      // console.log(value);
      // if (allCodes.includes("00000")) {
      //   this.form.accessIndustry = ["00000"];
      // }
      // console.log(allCodes);
      // const allSelected = allCodes.every(code => value.includes(code));
      //
      // if (allSelected) {
      //   console.log("All options are selected");
      // } else {
      //   console.log("Not all options are selected");
      // }
    },
    collectLeafCodes(nodes) {
      let leafCodes = [];
      nodes.forEach(node => {
        if (node.children && node.children.length > 0) {
          leafCodes = leafCodes.concat(this.collectLeafCodes(node.children));
        } else {
          leafCodes.push(node.code);
        }
      });
      return leafCodes;
    },
    getIndustryList() {
      getIndustryList().then(res => {
        if (res.data) {
          this.industryList = [
            {
              code: "00000",
              id: "00000",
              name: "全部",
              children: res.data
            }
          ];
          this.removeEmptyChildren(this.industryList);
        }
      });
    },
    removeEmptyChildren(nodes) {
      nodes.forEach(node => {
        if (node.children && node.children.length > 0) {
          // 如果当前节点有子节点，则递归处理每个子节点
          this.removeEmptyChildren(node.children);
        } else {
          // 如果当前节点没有子节点，就删除 children 属性
          delete node.children;
        }
      });
    },

    handleBankChange(e) {
      let bank = this.bankList.find(item => item.id == e);
      if (bank) {
        this.form.bankName = bank.name;
      }
    },
    inputAge(value, type) {
      if (value.length > 2) {
        if (type == "min") {
          this.form.corporateAge = value.slice(0, 2);
        } else {
          this.form.corporateMaxAge = value.slice(0, 2);
        }
      }
      if (Number(value) < 0) {
        type == "min"
          ? (this.form.corporateAge = "")
          : (this.form.corporateMaxAge = "");
        return this.$message.error("年龄不能小于0");
      }
      if (Number(value) > 99 || Number(value) < 18) {
        type == "min"
          ? (this.form.corporateAge = "")
          : (this.form.corporateMaxAge = "");
        this.$message.error("年龄不能大于99或小于18");
      }
      if (
        this.form.corporateMaxAge &&
        this.form.corporateMaxAge &&
        this.form.corporateMaxAge <= this.form.corporateAge
      ) {
        type == "min"
          ? (this.form.corporateAge = "")
          : (this.form.corporateMaxAge = "");

        this.$message.error("最大年龄不能小于等于最小年龄");
        // return this.form.corporateMaxAge == "";
      }
      // console.log(this.form.corporateMaxAge);
    },
    delMoreType(idx) {
      this.form.customRequireList.splice(idx, 1);
    },
    handleCloseMoreType() {
      this.addTypeFlag = false;
      this.$refs.addTypeForm.resetFields();
    },
    addMoreType() {
      this.addTypeFlag = true;
    },
    onSubmitAddType(form) {
      this.$refs[form].validate(valid => {
        if (valid) {
          const index = this.form.customRequireList.findIndex(v => {
            return v.title === this.addTypeForm.title;
          });
          if (index !== -1) {
            this.$message.error("要求标题不能重复");
            return;
          } else {
            this.form.customRequireList.push({
              title: this.addTypeForm.title,
              content: this.addTypeForm.content
            });
            this.addTypeFlag = false;
            this.addTypeForm = {
              title: "",
              content: ""
            };
            this.$refs[form].resetFields();
          }
        }
      });
    },
    getBankList() {
      getBankList().then(res => {
        this.bankList = res.data;
      });
    },
    getCityList() {
      getAreaTree().then(res => {
        this.cityList = res.data;
      });
    },
    getDetail() {
      if (this.$route.query.id) {
        this.$route.meta.title = "编辑产品";
        getProductDetail(this.$route.query.id).then(res => {
          res.data.advantageData = JSON.parse(res.data.advantageData).map(v => {
            return {
              value: v
            };
          });
          res.data.accessAreaList = res.data.accessAreaList
            ? res.data.accessAreaList.map(v => v.relation.split(","))
            : [];
          res.data.forbidIndustryList = res.data.forbidIndustryList
            ? res.data.forbidIndustryList.map(v => v.relation.split(","))
            : [];
          res.data.repaymentType = res.data.repaymentType.split(",");
          if (res.data.matchType) {
            res.data.matchType = res.data.matchType.split(",");
          } else {
            res.data.matchType = ["1"];
          }

          res.data.minQuota = res.data.minQuota + "";
          res.data.maxQuota = res.data.maxQuota + "";
          res.data.loanTerm =
            typeof res.data.loanTerm === "string"
              ? res.data.loanTerm
              : res.data.loanTerm + "";
          res.data.loanType =
            typeof res.data.loanType === "string"
              ? res.data.loanType
              : res.data.loanType + "";
          res.data.minAnnualRate = res.data.minAnnualRate + "";
          res.data.maxAnnualRate = res.data.maxAnnualRate + "";
          res.data.loanTerm = res.data.loanTerm.split(",");
          this.form = Object.assign({}, this.form, res.data);
          console.log('----------',res);
          
        });
      } else {
        this.$route.meta.title = "发布产品";
      }
    },
    resetForm() {
      this.form = {
        pic: "", //产品图片
        name: "", // 产品名称
        bankId: "", // 银行ID
        minQuota: "0", // 最小额度
        maxQuota: null, // 最大额度
        minAnnualRate: null, // 最小年化利率
        maxAnnualRate: null, // 最大年化利率
        corporateAge: null, // 最小年龄
        corporateMaxAge: null, // 最大年龄
        loanTerm: [], // 借款期限
        repaymentType: [], // 还款方式
        advantageData: [{ value: "" }, { value: "" }, { value: "" }], // 产品优势
        loanType: "1",
        channelCode: "platform",
        productSn: "",
        intoElement: "",
        matchType: ["1"],
        modelService:"",
        // corporateAge: "", //法人年龄
        // corporateChangeTime: "", //法人变更时长
        // corporateSharesRatio: "", //法人持股比例
        // corporateRequire: "", //法人要求
        // companyCreateTime: "", //企业成立时长
        // companyTaxRating: "", // 企业纳税评级
        // companyTaxStatus: "", //  企业纳税状态
        // companyReceiptRequire: "", //企业开票要求
        // companyApplyRequire: "", //企业申请要求
        creditRequire: "", //征信要求
        accessAreaType: 1, //准入地区类型
        accessAreaList: [], // 地区列表
        prohibitIndustry: "", //禁入行业
        accessIndustry: "", //准入行业
        legalApplyRequire: "", //法人申请要求
        companyTaxInfo: "", //  企业纳税信息
        companyBizStatus: "", //企业经营状态
        companyBankFlow: "", //企业经营流水
        otherRequire: "", //其他要求
        customRequireList: [],
        modelService:"",
        sort: 0
        // requiredMaterials: "",
      };
    },
    addProduct() {
      this.isSucess = false;
      this.resetForm();
    },
    handleTabClick(id) {
      this.current = id;
      const mapObj = {
        0: "basicInfo",
        1: "requiredDocuments",
        // 1: "personalRequirements",
        // 2: "businessRequirements",
        // 3: "creditRequirements",
        2: "admissionAreas",
        3: "prohibitedIndustries",
        4: "applyStep"

        // 6: "requiredDocuments",
      };
      this.$refs[mapObj[id]].scrollIntoView({ behavior: "smooth" });
    },
    uploadSucces() {
      this.$refs.formRef.validateField("pic");
    },
    onSubmit(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          let params = Object.assign({}, this.form);
          params.forbidIndustryList = params.forbidIndustryList && params.forbidIndustryList.map(item => {
            return {
              industryId: item[item.length - 1],
              relation: item.join(','),
              type: 0
            }
          })
          if (params.accessAreaType == 2) {
            params.accessAreaList = params.accessAreaList.map(v => {
              return {
                areaId: v[v.length - 1],
                relation: v.join(",")
              };
            });
          } else {
            params.accessAreaList = [];
          }
          params.advantageData = JSON.stringify(
            params.advantageData.map(v => {
              return v.value;
            })
          );
          params.repaymentType = params.repaymentType.join(",");
          params.matchType = params.matchType.join(",");
          params.loanTerm = params.loanTerm.join(",");

          if (params.loanType == 1 || params.loanType == 2) {
            params.type = 2;
          } else {
            params.type = 1;
          }
          if (Number(params.minQuota) > Number(params.maxQuota)) {
            return this.$message.error("最小额度不能大于最大额度");
          }
          if (Number(params.minAnnualRate) > Number(params.maxAnnualRate)) {
            return this.$message.error("最小年化利率不能大于最大年化利率");
          }

          console.log(params);
          // return;
          if (this.$route.query.id) {
            params.id = this.$route.query.id;
            editProduct(params).then(res => {
              if (res.code == 200) {
                this.$message.success("修改成功");
                setTimeout(() => {
                  this.$router.go(-1);
                }, 500);
              }
            });
          } else {
            addProduct(params).then(res => {
              if (res.code == 200) {
                this.$message.success("添加成功");
                this.isSucess = true;
                // setTimeout(() => {
                //   this.$router.go(-1);
                // }, 500);
              }
            });
          }
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.wenhao {
  cursor: pointer;
  font-size: 13px;
  color: #fff;
  width: 16px;
  height: 16px;
  display: inline-block;
  background-color: #999;
  text-align: center;
  line-height: 16px;
  border-radius: 8px;
}
.clearfix {
  clear: both;
  font-weight: bold;
}
.app-container {
  height: calc(100vh - 50px);
  background-color: #f5f5f5;
  position: relative;
}
.tab-bar {
  position: absolute;
  left: 10px;
  top: 0px;
  width: calc(100% - 20px);
  background-color: #fff;
  height: 60px;
  line-height: 60px;
  display: flex;
  .tab-item {
    height: 100%;
    width: 100px;
    text-align: center;
    font-size: 14px;
  }
  .tab-item-ac {
    background-color: rgba(64, 158, 255, 0.1);
    color: #409eff;
    border-top: 2px solid #409eff;
  }
}
.form-main {
  margin-top: 40px;
  height: calc(
    100% - 80px
  ); /* 将高度设置为父级容器高度减去上方固定元素的高度 */
  overflow-y: auto;
  .form-box {
    text-align: center;
    margin-top: 40px;
  }
  .uploadPic {
    width: 90px;
    height: 90px;

    background: #eeeeee;
    border-radius: 8px;
    position: relative;
    > i {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
    }
  }
  .inputSty {
    display: flex;
  }
  .box-card {
    margin-bottom: 30px;
  }
}
/deep/ .el-cascader {
  max-height: 200px;

}
/deep/ .el-cascader__tags {
  max-height: 200px;
  overflow: auto;
}
/deep/ .el-cascader__tags::-webkit-scrollbar {
  width: 0;
}
</style>
